<script>
import { NavBar, DropdownMenu, DropdownItem, Cell, Tag, Button } from 'vant';
import dayjs from 'dayjs'

export default {
  name: "TicketView",
  components: {
    [NavBar.name]: NavBar,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Button.name]: Button,
  },
  data() {
    return {
      // 筛选条件
      filterOptions: {
        shippingtype: null,       // 运送类型
        shippingpriority: null,   // 优先级
        shippingstarttime: null,  // 开始时间
        shippingstatus: null,     // 运送状态
      },
      // 下拉选项
      dateOptions: [
        { text: '工单日期', value: null },
        { text: '今天', value: 1 },
        { text: '本周', value: 2 },
        { text: '本月', value: 3 },
      ],
      typeOptions: [
        { text: '工单类别', value: null },
        { text: '即时运送工单', value: 1 },
        { text: '预约运送工单', value: 2 },
      ],
      priorityOptions: [
        { text: '优先级', value: null },
        { text: '普通', value: 1 },
        { text: '紧急', value: 2 },
        { text: '特急', value: 3 },
      ],
      statusOptions: [
        { text: '全部状态', value: null },
        { text: '待处理', value: 1 },
        { text: '处理中', value: 2 },
        { text: '已完成', value: 3 },
      ],
      // 工单列表
      tickets: [],
      formInline: {

      },
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    findAll() {
      // 根据筛选条件处理日期范围
      let dateFilter = {}

      switch (this.filterOptions.shippingstarttime) {
        case 1: // 今天
          dateFilter = {
            startDate: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
            endDate: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
          }
          break
        case 2: // 本周（前7天）
          dateFilter = {
            startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
            endDate: dayjs().format('YYYY-MM-DD HH:mm:ss')
          }
          break
        case 3: // 本月（前30天）
          dateFilter = {
            startDate: dayjs().subtract(30, 'day').format('YYYY-MM-DD HH:mm:ss'),
            endDate: dayjs().format('YYYY-MM-DD HH:mm:ss')
          }
          break
        default:
          dateFilter = {}
      }

      // 构建查询参数
      const params = {
        shippingtype: this.filterOptions.shippingtype || null,
        shippingpriority: this.filterOptions.shippingpriority || null,
        shippingstarttime: dateFilter.startDate || null,
        shippingendtime: dateFilter.endDate || null,  // 添加结束时间
        shippingstatus: this.filterOptions.shippingstatus || null,
      }

      // 发送请求
      this.axios.post(`http://localhost:9999/api-central-service/shipping/findAll?pageNo=${this.pageInfo.pageNo}&pageSize=${this.pageInfo.pageSize}`, params)
          .then(res => {
            this.tickets = res.data.data.list;
            this.pageInfo.total = res.data.data.total;
          })
          .catch(err => {
            console.log(err);
          })
    },
    handleTicket(ticket) {
      // 处理工单点击事件
      console.log('处理工单:', ticket);
      this.$toast('sao等一下...很快~');
      this.$router.push({path: '/details', query: {id: ticket.id}});
    },
    onBack() {
      this.$router.go(-1);
    },
    getPriorityStyle(priority) {
      switch (priority) {
        case '特急':
          return {color: '#f44336'};
        case '紧急':
          return {color: '#ff9800'};
        default:
          return {color: '#2196f3'};
      }
    },
    handlePageChange(page) {
      this.pageInfo.pageNo = page;
      this.findAll();
    },
    getButtonType(status) {
      switch (status) {
        case 1: // 已完成
          return 'success';
        case 2: // 已派单
          return 'primary';
        case 3: // 已退回
          return 'warning';
        case 4: // 挂单
            return 'danger';
        default:
          return 'default';
      }
    },
    getButtonText(status) {
      switch (status) {
        case 1:
          return '已完成';
        case 2:
          return '处理';
        case 3:
          return '已退回';
        case 4:
          return '挂单';
        default:
          return '处理';
      }
    }
  },
  watch: {
    // 监听筛选条件变化
    filterOptions: {
      handler() {
        this.pageInfo.pageNo = 1; // 切换筛选条件时重置页码
        this.findAll();
      },
      deep: true
    }
  },
  mounted() {
    this.findAll();
  }
}
</script>

<template>
  <div class="ticket-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="运送工单"
        left-arrow
        @click-left="onBack"
        fixed
    />

    <!-- 筛选菜单 -->
    <div class="filter-container">
      <van-dropdown-menu>
        <van-dropdown-item
            v-model="filterOptions.shippingstarttime"
            :options="dateOptions"
        />
        <van-dropdown-item
            v-model="filterOptions.shippingtype"
            :options="typeOptions"
        />
        <van-dropdown-item
            v-model="filterOptions.shippingpriority"
            :options="priorityOptions"
        />
        <van-dropdown-item
            v-model="filterOptions.shippingstatus"
            :options="statusOptions"
        />
      </van-dropdown-menu>
    </div>

    <!-- 工单列表容器 -->
    <div class="content-container">
      <!-- 工单列表 -->
      <div class="ticket-list">
        <div v-for="ticket in tickets" :key="ticket.id" class="ticket-item">
          <div class="ticket-header">
            <div class="ticket-id">编号：{{ ticket.id }}</div>
            <!--          标签状态右对齐-->
            <div class="ticket-status">
              <van-tag v-if="ticket.shippingpriority === 1" type="success">普通</van-tag>
              <van-tag v-if="ticket.shippingpriority === 2" type="warning">紧急</van-tag>
              <van-tag v-if="ticket.shippingpriority === 3" type="danger">特级</van-tag>
            </div>
          </div>
          <div class="ticket-content">
            <div class="ticket-info">
              <div class="ticket-header">工单类别:
                <span v-if="ticket.shippingtype==1">即时运送工单</span>
                <span v-if="ticket.shippingtype==2">预约运送工单</span>
              </div>
              <div class="ticket-id">开始时间：{{ ticket.shippingstarttime }}</div>
            </div>
            <div class="ticket-actions">
              <van-button
                  square
                  :type="getButtonType(ticket.shippingstatus)"
                  size="small"
                  @click="handleTicket(ticket)"
              >
                {{ getButtonText(ticket.shippingstatus) }}
              </van-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页器 -->
      <div class="pagination-container">
        <van-pagination
            v-model="pageInfo.pageNo"
            :total-items="pageInfo.total"
            :items-per-page="pageInfo.pageSize"
            :show-page-size="3"
            force-ellipses
            @change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.filter-container {
  position: sticky;
  top: 46px; /* 导航栏高度 */
  z-index: 100;
  background-color: #fff;
}

.content-container {
  padding-top: 46px; /* 导航栏高度 */
  padding-bottom: 50px; /* 分页器高度 */
  min-height: calc(100vh - 96px); /* 视口高度减去导航栏和分页器高度 */
  display: flex;
  flex-direction: column;
}

.ticket-list {
  flex: 1;
  padding: 12px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
}

:deep(.van-button--success) {
  background-color: #07c160;
  border-color: #07c160;
}

.pagination-container {
  padding: 12px 16px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

:deep(.van-dropdown-menu) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

:deep(.van-dropdown-menu__bar) {
  background-color: #fff;
}

/* 确保下拉菜单在打开时显示在内容之上 */
:deep(.van-dropdown-item__content) {
  z-index: 101;
}

/* 优化筛选菜单样式 */
:deep(.van-dropdown-menu__item) {
  justify-content: center;
  font-size: 14px;
}

:deep(.van-dropdown-menu__title) {
  color: #323233;
}

:deep(.van-dropdown-menu__title--active) {
  color: #1989fa;
}
</style>